<template>
<!-- 表单 -->
    <el-form :model="form" ref="form" label-width='200px' :inline ='inline' label-position='left'>
        <el-form-item label-width='auto' :required='item.required' v-for="item in formLabel" :key="item.model" :label="item.label+' : '" :hide-required-asterisk='item.is_important? true:false'>
            <!-- 输入框 -->
            <el-input  v-model="form[item.model]"  :placeholder="'请输入'+item.label" v-if="!item.type"  :suffix-icon="item.icon ? item.icon:''"></el-input>
            <!-- 选择器 -->
            <el-select v-model="value" :placeholder="'请选择'+item.label" v-if="item.type==='select'">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <!-- 级联选择 -->
            <el-cascader v-if="item.type==='cascader'" v-model="form[item.model]" :options="item.options" :placeholder="'请选择'+item.label" :props="item.props" @change="handleChange"></el-cascader>
            <!-- 评分 -->
            <el-rate v-model="form[item.model]" v-if="item.type==='rate'"></el-rate>
            <!-- 多选框 -->
            <el-checkbox-group v-model="form[item.model]" v-if="item.type==='checkbox'">
                <el-checkbox :label="item2" v-for="(item2,index) in item.checkList" :key="index"></el-checkbox>
            </el-checkbox-group>
            <!-- 步进器 -->
            <el-input-number v-model="form[item.model]" :label="item.label" v-if="item.type==='sort'" size="small"></el-input-number>
            <!-- 是否显示 -->
            <el-switch class="switchStyle" v-if="item.type ==='switch'" @change="onChange" v-model="form[item.model]" active-text="显示" inactive-text="隐藏"></el-switch>
            <!-- 图片上传 -->
            <common-upload v-if="item.type ==='upload'" v-model="img_list" :inputInfo='inputInfo'></common-upload>
            <!-- 富文本 -->
        </el-form-item>
        <slot></slot>
    </el-form>
</template>

<script>
import CommonUpload from '../common/CommonUpload.vue'
export default {
  components: { CommonUpload },
    props:{
      value:String,
      options:Array,
      img_list:Array,
      inputInfo: {
      type: Object,
      default: {},
    },
      inline :Boolean,
      onChange:Function,
      handleChange:Function,
      form:Object,
      formLabel:Array,
    }
    
}
</script>

<style>
.switchStyle .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
.switchStyle .el-switch__label--left {
  z-index: 9;
  left: 25px;
}
.switchStyle .el-switch__label--right {
  z-index: 9;
  left: -1px;
}
.switchStyle .el-switch__label.is-active {
  display: block;
}
.switchStyle.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 60px !important;
}
</style>
